<!-- 个人中心 -->
<template>
  <div style="text-align: center">
    <h2>你好！{{ userInfo.username }}</h2>
    <el-form
      :model="passForm"
      status-icon
      :rules="rules"
      ref="passForm"
      label-width="100px"
    >
      <el-form-item label="旧密码" prop="currentPass">
        <el-input
          type="password"
          v-model="passForm.currentPass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="password">
        <el-input
          type="password"
          v-model="passForm.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input
          type="password"
          v-model="passForm.checkPass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('passForm')"
          >提交</el-button
        >
        <el-button @click="resetForm('passForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import userApi from '@/api/user.js'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      //用户信息
      userInfo: {},
      //修改密码表单
      passForm: {
        currentPass: "",
        password: "",
        checkPass: "",
      },
      //修改密码表单规则
      rules: {
        password: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
        checkPass: [
          { required: true, validator: this.validatePass, trigger: "blur" },
        ],
        currentPass: [
          { required: true, message: "请输入当前密码", trigger: "blur" },
        ],
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //获取用户信息以及密码
    // getUserInfo() {
    //   this.$axios.get("/sys/user/getUserInfo").then((res) => {
    //     this.userInfo = res.data.data;
    //   });
    // },
    //表单自定义校验
    validatePass(rule, value, callback) {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.passForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    },
    //表单提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //调用接口
          var _this = this;
          userApi.updatePwd(this.passForm).then((res) => {
            _this.$alert(res.data.msg, "提示", {
              confirmButtonText: "确定",
              callback: (action) => {
                this.resetForm("passForm");
               
                //清除localStorage内容
                localStorage.clear();
                //清除session
                sessionStorage.clear();
                //清除全局状态存入的信息
                this.$store.commit("resetState");

                 //修改成功后重新登录
                this.$router.push("/login");
              },
            });
          });
        } else {
          this.$message.error("提交发生错误！");
          return false;
        }
      });
    },
    //重置表单
    //重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    //加载后获取用户信息
    // this.getUserInfo();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  //3.0版本弃用 beforeDestroy() {}, //生命周期 - 销毁之前
  //3.0版本弃用 destroyed() {}, //生命周期 - 销毁完成
  beforeUnmount() {}, //生命周期 - 销毁之前
  unmounted() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.el-form {
  width: 420px;
  margin: 50px auto;
}
</style>